<!-- 巡检计划 -->
<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/index.css">
  <link rel="stylesheet" href="{{ layui.setter.base }}style/autoComplete.css">
  <link rel="stylesheet" href="{{ layui.setter.base }}style/page.css">
  <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/time_alert.css">
</script>

<div class="box layui-fluid layui-row leon-fluid">
  <div class="layui-btn-container layui-col-sm14 layui-col-md14" style="text-align: left;">
    <button class="add-btn layui-btn layui-btn-radius layui-btn-primary">
      <i class="layui-icon layui-icon-add-circle" style="font-size: 14px; color: #1E9FFF;margin-right: 3px;"></i>
      <span>新增计划</span>
    </button>
  </div>
  <form class="form layui-form layui-col-sm14 layui-col-md14" action="">
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
      <label class="layui-form-label">计划名称:</label>
      <div class="layui-input-block layui-col-space14">
        <input type="text" name="tcPlanName" autocomplete="off" class="layui-input" />
      </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
      <label class="layui-form-label">计划编号：</label>
      <div class="layui-input-block">
        <input type="text" name="tcPlanCode" autocomplete="off" class="layui-input " />
      </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2 ">
      <label class="layui-form-label ">计划状态：</label>
      <div class="layui-input-block ">
        <select name="tcPlanStatus">
          <option value=""></option>
          <option value="0">启用</option>
          <option value="1">停用</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item layui-col-sm2 layui-col-md2">
      <label class="layui-form-label">巡检人：</label>
      <div class="layui-input-block completeWrap">
        <input name="tcPlanGen01" id="tcPlanGen01" value="" autocomplete="off" class="layui-input" />
      </div>
    </div>
    <div class="layui-btn-container layui-col-sm2 layui-col-md2" style="text-align: right;">
      <button class="search-btn layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="planGenQuery">
        <i class="layui-icon layui-icon-search" style="font-size: 10px; color: #FFF;"></i>
        <span>查询</span>
      </button>
    </div>
  </form>
  <table class="layui-table" id="table-list" lay-filter="table-list"></table>
  <div class="footer table-toolbar-wrapper layui-btn-container">
    <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-event="deleteItem">
      <i class="layui-icon layui-icon-delete" style="font-size: 15px; color: #FFF;"></i>
      <span>删除</span>
    </button>
    <button class="btn2 layui-btn layui-btn-radius layui-btn-primary" lay-event="onOff">
      <i class="layui-icon layui-icon-pause" style="font-size: 14px; color: #FFF;"></i>
      <span style="margin-left: 3px;">启用/停用</span>
    </button>
    <button class="btn3 layui-btn layui-btn-radius layui-btn-primary" lay-event="timePlay">
      <i class="layui-icon layui-icon-log" style="font-size: 14px; color: #FFF;"></i>
      <span style="margin-left: 3px;">时间/频率调整</span>
    </button>
  </div>
</div>
<script type="text/html" id="timeAlert">

  <div class="layui-alert">
      <div class="layui-alert-title">时间 / 频率调整</div>
      <form class="layui-form" action="">
          <div class="alert-form-box layui-form-item">
              <label class="layui-form-label">计划开始时间:  </label>
              <div class="layui-input-block">
                  <input type="text" name="tcPlanStart" required lay-verify="required" id="startTime" placeholder="" autocomplete="off" class=" alert-input layui-input">
              </div>
          </div>
          <div class="alert-form-box layui-form-item">
              <label class="layui-form-label">计划结束时间:  </label>
              <div class="layui-input-block">
                  <input type="text" name="tcPlanEnd" required lay-verify="required" id="endTime" placeholder="" autocomplete="off" class="   alert-input layui-input">
              </div>
          </div>
          <div class="alert-form-box layui-form-item">
              <label class="layui-form-label">计划频率调整:  </label>
              <div class="layui-input-block">
                  <select name="tcPlanFrequency" lay-filter="frequency" lay-verify="required" required id="frequency">
                      <option value=""></option>
                      <option value="H">每小时</option>
                      <option value="D">每日</option>
                      <option value="W">每周</option>
                      <option value="M">每月</option>
                  </select>
              </div>
          </div>
          <div class="layui-btn-containner">

              <button type="button" class="btn1 alert-btn layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="submitPL">确定</button>
              <button type="button" class="btn2 alert-btn layui-btn layui-btn-radius layui-btn-primary">取消</button>
          </div>
      </form>
  </div>
</script>

<script>
  !(function () {
    //无需再执行layui.use()方法加载模块，直接使用即可
    var $ = layui.$,
      api = layui.api;

    layui.use(
      ["form", "table", "api", "utill", "admin", "view", "laydate", "laytpl"],
      function () {
        //此段代码必不可少
        var table = layui.table,
          setter = layui.setter,
          laytpl = layui.laytpl,
          api = layui.api,
          utill = layui.utill,
          form = layui.form,
          element = layui.element,
          laypage = layui.laypage,
          laydate = layui.laydate,
          form = layui.form,
          view = layui.view;

        form.render();
        var _TPL = {
          tcPlanIsAuto: function (d) {
            if (d.tcPlanIsAuto == 0) {
              return "<span>否</span>";
            } else if (d.tcPlanIsAuto == 1) {
              return "<span>是</span>";
            } else {
              return '';
            }
          },
          tcPlanStatus: function (d) {
            if (d.tcPlanStatus == 0) {
              return "<span>启用</span>";
            } else if (d.tcPlanStatus == 1) {
              return "<span>停用</span>";
            } else {
              return '';
            }
          },
          tcPlanFrequency: function (d) {
            if (d.tcPlanFrequency == "H") {
              return "<span>每小时</span>";
            } else if (d.tcPlanFrequency == "D") {
              return "<span>每日</span>";
            } else if (d.tcPlanFrequency == "W") {
              return "<span>每周</span>";
            } else if (d.tcPlanFrequency == "M") {
              return "<span>每月</span>";
            } else {
              return ''
            }
          }
        };
        // 列定制
        utill.columnCustom('#table-list', "TcEamReqPlanQueryVO", {
          url: api.host + api.xjjh.selectByList,
          where: {
            tcPlanName: "",
            tcPlanCode: "",
            tcPlanStatus: "",
            tcPlanGen01: ""
          },
          templet: _TPL
        });
           utill.showAndHide('.btn1,.btn2,.btn3', 'TcEamReqPlanController:updatePlan')
        //巡检计划创建权限
        utill.showAndHide('.add-btn','TcEamReqPlanController:insertPlan')
        form.on("submit(planGenQuery)", function (data) {
          var allData = data.field;
          table.reload("#table-list", {
            where: allData
          });
          return false;
        });

        //底部工具栏事件
        $(".table-toolbar-wrapper button").click(function () {
          var checkStatus = table.checkStatus("#table-list");
          var data = checkStatus.data;

          if ($(this).hasClass("btn1")) {
            var dataStr = "";
            var arr   = '';
            data.map((item, index) => {
              if(data.length == 1){
                dataStr += item.tcPlanId;
              }else if(index == data.length - 1){
                dataStr += item.tcPlanId;
              }else{
                dataStr += item.tcPlanId + ','
              }
            });
            // 未选中行数
            if (data.length == 0) {
              layer.msg("请选择一项数据进行操作！", {
                shade: 0.1,
                time: 4000
              });
              return;
            }
            var ajaxOpts = {
              url: api.host + api.xjjh.setIsDeleteStatus + "?ids=" + dataStr,
              type: "POST"
            };
            layer.msg(
              '<h3 style="color: #111;">确定删除此项吗？</h3><p style="color: #999; font-size: 11px">删除后将无法恢复哟~</p>',
              {
                time: 0,
                btn: ["删除", "取消"],
                btnAlign: "c",
                shade: 0.3,
                skin: "custom-msg",
                yes: function (index, layero) {
                  view.req(ajaxOpts).done(function (res) {
                    var success = res.success;
                    var data = res.data;

                    layer.msg(res.message);
                    table.reload("#table-list");
                  });
                }
              }
            );
          } else if ($(this).hasClass("btn2")) {
            // 未选中行数
            if (data.length == 0) {
              layer.msg("请选择一项数据进行操作！",{time: 4000});
              return;
            }
            var planIds = data.map((item, index) => {
              return {
                tcPlanId: item.tcPlanId,
                tcPlanStatus: item.tcPlanStatus
              };
            });
            var ajaxOpts = {
              url: api.host + api.xjjh.updateStatus,
              type: "POST",
              contentType: "application/json",
              data: JSON.stringify(planIds)
            };
            view.req(ajaxOpts).done(function (res) {
              var success = res.success;
              var data = res.data;

              layer.msg(res.message);
              table.reload("#table-list");
            });
          } else if ($(this).hasClass("btn3")) {
            // 未选中行数
            if (data.length == 0) {
              layer.msg("请选择一项数据进行操作！",{time: 5000});
              return;
            }
            layer.open({
              type: 1,
              title: false,
              area: ["368px", "215px"],
              fixed: true,
              shadeClose: true,
              skin: "timeAlert",
              closeBtn: 0,
              content: $("#timeAlert").html(),
              success: function (layeror, index) {
                var nowTime = new Date();

                //开始日期-结束日期
                laydate.render({
                  elem: "#startTime",
                  type: "datetime",
                  done: function (value, date, endDate) {
                    var startTime = new Date(value).getTime();
                    var endTime = new Date($('#endTime').val()).getTime();
                    if (endTime < startTime) {
                      layer.msg("计划结束时间不能小于计划开始时间");
                      $("#startTime").val("");
                    }
                  },
                  value: data[0].tcPlanStart || ''
                });
                laydate.render({
                  elem: "#endTime",
                  type: "datetime",
                  done: function (value, date, endDate) {
                    var startDate = new Date($('#startTime').val()).getTime();
                    var endTime = new Date(value).getTime();
                    if (endTime < startDate) {
                      layer.msg("计划结束时间不能小于计划开始时间");
                      $("#endTime").val("");
                    }
                  },
                  value: data[0].tcPlanEnd || ''
                });
                $('[name="tcPlanFrequency"]').val(data[0].tcPlanFrequency);
                form.render();

                form.on("submit(submitPL)", function (data) {
                  var allData = data.field;
                  var arrs = [];
                  checkStatus.data.map((item) => {
                    arrs.push({
                      tcPlanId: item.tcPlanId,
                      tcPlanStart: allData.tcPlanStart,
                      tcPlanEnd: allData.tcPlanEnd,
                      tcPlanFrequency: allData.tcPlanFrequency
                    })

                  })
                  var opts = {
                    url: api.host + api.xjjh.updatePlan,
                    contentType: "application/json",
                    type: "POST",
                    data: JSON.stringify(arrs)
                  };
                  utill.loading.show();
                  view.req(opts).done(res => {
                    utill.loading.hide();
                    layer.msg(res.message, {
                      shade: 0.1
                    });
                    setTimeout(function () {
                      layer.closeAll();
                      table.reload('#table-list')
                    }, 1500);
                  });
                });
                $(".layui-btn-containner").on("click", ".btn2", function (
                  target
                ) {
                  layer.closeAll();
                });
              }
            });
          }
        });


        utill.fuzzmatch("#tcPlanGen01");

        table.on("tool(table-list)", function (obj) {
          var data = obj.data;
          if (obj.event == "detail") {
            $(this).attr("lay-href", "patrol/branch-one/details/planId=" + data.tcPlanId + "/tcPlanStatus=" + data.tcPlanStatus);
          }
        });
      }
    );

    //第一个实例
    $(".layui-table").on("click", ".layui-icon-made", function () {
      layer.open({
        type: 2,
        title: false,
        area: ["368px", "284px"],
        fixed: true,
        shadeClose: true,
        closeBtn: 0,
        content: ["../src/views/home/alert/Customized.html", "no"]
      });
    });
    $(".layui-btn-container .add-btn").attr(
      "lay-href",
      "patrol/branch-one/new_plan"
    );
  })();
</script>

<style>
  .leon-fluid .layui-table-tool {
    min-height: auto;
    line-height: inherit;
    padding: 0;
    border-width: 0;
  }

  .leon-fluid .layui-table-tool .layui-table-tool-temp {
    position: absolute;
    top: calc(100vh - 140px);
    left: 13px;
  }

  .custom-msg {
    border-radius: 6px;
    border: 0;
    width: 250px;
  }

  .custom-msg .layui-layer-content {
    text-align: center;
  }

  .custom-msg .layui-layer-btn a {
    height: 28px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 28px;
  }

  .custom-msg .layui-layer-btn a.layui-layer-btn0 {
    background: #ff4c4c;
    border: 0;
    margin-right: 50px;
  }

  .custom-layer {
    background: none;
  }
</style>